<template>
  <div class="jssdk-main">
    <h1>jssdk</h1>
    <button @click="seleImg">选择图片</button>
    <br />
    <br />
    <br />
    <button @click="startRec">开始录音</button> =======
    <button @click="stopRec">结束录音</button>
    <p>状态: {{statusText}}}</p>
    <p>语音转换结果: {{transText}}</p>
    <br />
    <br />
    <br />
    <button @click="resetShare">设置分享</button>
    <ul>
      <li v-for="item in imgList" :key="item">
        <img :src="item" alt />
      </li>
    </ul>
  </div>
</template>

<script>
// 微信公众号开发 只支持 history mode
const appid = "wxb10344d6be4e46ee";
// 已经对接微信服务器的后台程序(需要后台自行实现)
var serveHost = "http://www.bufantec.com";
// 从服务器后台获取签名信息
// 要求发送appId  而且必须的先注册(??)
var signatureApi = `${serveHost}/wx/user/getAccessToken?appId=${appid}`;
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      imgList: [],
      statusText: "等待录音...",
      transText: ''
    };
  },
  computed: {},
  created() {
    this.initWxConfig();
  },
  mounted() {},
  methods: {
    seleImg() {
      var that = this;
      // 如果微信基本配置完成  可以在这里调用jssdk api
      wx.ready(function() {
        // 调用微信 打开相册
        wx.chooseImage({
          count: 9, // 默认9
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            that.imgList = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          }
        });
      });
    },
    startRec() {
        var that = this;
        wx.ready(()=>{
            that.statusText = '正在录音...';
            wx.startRecord();
        })
    },
    stopRec() {
        var that = this;
        wx.ready(()=>{
            wx.stopRecord({
                success: function (res) {
                    that.statusText = '等待录音...';
                    // 录音的uri 资源地址
                    var localId = res.localId;
                    // 把录音的内容转换为文字显示
                    wx.translateVoice({
                        localId, // 需要识别的音频的本地Id，由录音相关接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                           that.transText = res.translateResult; // 语音识别的结果
                        }
                    })
                }
            });
        })
    },
    resetShare(){
        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({ 
                title: '不凡君的分享', // 分享标题
                desc: '这是一个微信jssdk的分享测试内容', // 分享描述
                link: 'http://bufantec.natapp1.cc/wx', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://bufanui.com/pages/front/img/LOGO.png', // 分享图标
                success: function () {
                // 设置成功
                    alert('设置分享成功!')
                }
            })
        });
    },
    initWxConfig() {
      console.log("准备获取签名....");
      // 前提?? 发送请求到后台 获取 签名信息.
      // 后台签名api:  /wx/user/getAccessToken?appId=xxx
      //     - 参数: appId  (注意: 必须先注册)
      axios.get(signatureApi).then(res => {
        console.log(res.data);
        // 解构出需要用的属性
        var { timestamp, signature, noncestr } = res.data;
        // var timestamp = res.data.timestamp
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appid, // 必填，公众号的唯一标识
          timestamp, // 必填，生成签名的时间戳 new Date().getTime() ==> 时间戳  从1970年1月1号0时(北京时间8点)到现在的毫秒数
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名
          jsApiList: ["chooseImage",'startRecord','stopRecord','translateVoice','updateAppMessageShareData'] // 必填，需要使用的JS接口列表
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.jssdk-main {
  ul {
    list-style: none;
  }
  ul {
    li {
      text-align: center;
      img {
        width: 200px;
        height: 165px;
      }
    }
  }
}
</style>
